<template>
	<view class="content">
		<view class="todo-header" v-if="list.length!==0">
			<!--状态栏左侧-->
			<view class="todo-header_left">
				<text class="active-text">{{text}}</text>
				<text>{{listData.length}}条</text>
			</view>
			<!--状态栏的右侧-->
			<view class="todo-header_right">
				<view class="todo-header_right-item" :class="{'active-tab':activeIndex===0}" @click="tab(0)">全部</view>
				<view class="todo-header_right-item" :class="{'active-tab':activeIndex===1}" @click="tab(1)">待办</view>
				<view class="todo-header_right-item" :class="{'active-tab':activeIndex===2}" @click="tab(2)">已完成</view>
			</view>
		</view>
		<!--没有数据状态-->
		<view v-if="list.length===0" class="default">
			<view class="image-default">
				<image src="../../static/default.png" mode="aspectFit"></image>
			</view>
			<view class="default-info">
				<view class="default-info_text">您还没有创建任何待办事项</view>
				<view class="default-info_text">点击下方+号创建一个吧</view>

			</view>

		</view>
		<!--内容块-->
		<view v-else class="todo-content">
			<view class="todo-list " :class="{'todo-finish':item.checked}" v-for="(item,index) in listData" :key="index" @click="finish(item.id)">
				<view class="todo-list_checkbox">
					<view class="checkbox"></view>
				</view>
				<view class="todo-list_content">{{item.content}}</view>
			</view>
		</view>
		<!--创建按钮-->
		<view class="create-todo" @click="create">
			<text class="iconfont icon-add" :class="{'create-todo-active':textShow}"></text>
		</view>
		<!--输入框-->
		<view v-if="active" class="create-content" :class="{'create-show':textShow}">
			<view class="create-content-box">
				<!--input 输入-->
				<view class="create-input">
					<input type="text" v-model="value" placeholder="请输入您要创建的todo" />
				</view>
				<!--发布按钮-->
				<view class="create-button" @click="add">
					创建
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				active: false,
				value: '',
				activeIndex: 0,
				text: '全部',
				textShow: false,
			}
		},
		onLoad() {

		},
		computed: {
			listData() {
				let list = JSON.parse(JSON.stringify(this.list));
				let newList = [];
				//点击全部
				if (this.activeIndex === 0) {
					this.text = '全部';
					return list;
				}
				//点击待办事项
				if (this.activeIndex === 1) {
					this.text = '待办';
					list.forEach((item) => {
						if (!item.checked) {
							newList.push(item);
						}
					})
					return newList;
				}
				//点击已完成
				if (this.activeIndex === 2) {
					this.text = '已完成';
					list.forEach((item) => {
						if (item.checked) {
							newList.push(item);
						}
					})
					return newList;
				}
				return [];
			}
		},
		methods: {
			create() {
				this.active = !this.active;
				this.$nextTick(() => {
					setTimeout(() => {
						this.textShow = !this.textShow
					}, 50)
				})
			},
			//打开动画
			open() {
				this.active = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.textShow = true
					}, 50)
				})
			},
			//关闭动画
			close() {
				this.active = false
				this.$nextTick(() => {
					setTimeout(() => {
						this.textShow = false
					}, 350)
				})
			},
			add() {
				console.log(this.value);
				if (this.value === '') {
					uni.showToast({
						title: "请输入内容",
						icon: 'none'
					})
					return;
				}
				//push 插入到后面
				//
				this.list.unshift({
					id: 'id' + new Date().getTime(),
					content: this.value,
					checked: false
				})
				this.value = '';
				this.close()
			},
			//点击列表触发
			finish(id) {
				let index = this.list.findIndex((item) => item.id === id)
				console.log('点击了', this.list[index]);
				this.list[index].checked = !this.list[index].checked;
			},
			tab(index) {
				this.activeIndex = index;
			}

		}
	}
</script>

<style>
	@import url("../../common/icon.css");

	.todo-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 15px;
		font-size: 12px;
		color: #333333;
		height: 45px;
		box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		background: #FFFFFF;
		z-index: 10;
	}

	.todo-header_left {
		width: 100%;
	}

	.todo-header_right {
		flex-shrink: 0;
		display: flex;
	}

	.todo-header_right-item {
		padding: 0 5px;
	}

	.active-text {
		font-size: 14px;
		color: #279abf;
		padding-right: 10px;
	}

	.active-tab {
		color: #279abf;
	}

	.todo-content {
		position: relative;
		padding-top: 50px;
		;
		padding-bottom: 100px;
	}

	.todo-list {
		position: relative;
		display: flex;
		align-items: center;
		padding: 15px;
		margin: 15px;
		color: #0c3854;
		font-size: 14px;
		border-radius: 10px;
		background: #cfebfd;
		box-shadow: -1px 1px 5px 1px rgba(0, 0, 0, 0.1), -1px 2px 1px 0 rgba(255, 255, 255) inset;
		overflow: hidden;
	}

	.todo-list::after {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #91d1e8;

	}

	.todo-list_checkbox {
		padding-right: 15px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #FFFFFF;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
	}

	.todo-finish .checkbox {
		background: #eee;
		position: relative;
	}

	.todo-finish .checkbox:after {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		border-radius: 50%;
		background: #CFEBFD;
		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
	}

	.todo-finish .todo-list_content {
		color: #999999;
	}

	.todo-finish.todo-list:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 40px;
		right: 10px;
		height: 2px;
		margin: auto 0;
		background: #bdcdd8;
	}

	.todo-finish.todo-list:after {
		background: #cccccc;
	}

	.create-todo {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #deeff5;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
	}

	.icon-add {
		font-size: 30px;
		color: #add8e6;
	}

	.create-content {
		position: fixed;
		bottom: 95px;
		left: 20px;
		right: 20px;
		transition: all 0.3s;
		opacity: 0;
		transform: scale(0) translateY(200%);
	}

	.create-show {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	.create-content-box {
		display: flex;
		align-items: center;

		padding: 0 15px;
		padding-right: 0;
		border-radius: 50px;
		background: #DEEFF5;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
	}

	.create-input {
		width: 100%;
		padding-left: 15px;
		color: #add8e6;
	}

	.create-button {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		width: 80px;
		height: 50px;
		border-radius: 50px;
		font-size: 16px;
		color: #88d4ec;
		box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);

	}

	.create-content:after {
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background: #DEEFF5;
		transform: rotate(45deg);
		box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
		z-index: -1;

	}

	.create-content-box:after {
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background: #DEEFF5;
		transform: rotate(45deg);


	}

	.default {
		padding-top: 30px;
	}

	.image-default {
		display: flex;
		justify-content: center;
	}

	.image-default image {
		width: 100%;
	}

	.default-info {
		text-align: center;
		font-size: 14px;
		color: #CCCCCC;
	}

	.icon-add {
		transition: transform 0.3s;
	}

	.create-todo-active {
		transform: rotate(135deg);
	}
</style>
